<template>
  <div class="detail-page">
    <el-page-header  @back="$router.back()" />
    <el-card v-if="detail" class="mt-4">
      
      <div class="order-track-page">
    <!-- 左侧：订单信息 -->
    <div class="order-track-left">
      <h3>订单信息</h3>
      <div class="order-info-card">
        <div>订单编号：{{ order.orderNo }} <el-link @click="copy(order.orderNo)" :underline="false">复制</el-link></div>
        <div>买家昵称：{{ order.buyerName }}</div>
        <div>收货地址：{{ order.receiver }}</div>
        <div>店铺信息：{{ order.shopInfo }}</div>
        <div>配送方式：{{ order.deliveryType }}</div>
        <div>配送员：<el-link type="primary">{{ order.riderName }}，{{ order.riderPhone }}</el-link></div>
        <div class="goods-list">
          <div v-for="(item, idx) in order.goods" :key="idx" class="goods-item">
            <img :src="item.img" class="goods-img" />
            <div>
              <div>{{ item.name }} <span style="color:#888;">({{ item.brand }})</span></div>
              <div class="goods-desc">规格：{{ item.spec }}，辣度：{{ item.spicy }}</div>
            </div>
            <div class="goods-qty">x{{ item.qty }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧：地图+配送状态+时间轴 -->
    <div class="order-track-right">
      <div class="map-card">
        <!-- 这里用高德/百度/腾讯地图JS API，示例用div占位 -->
        <div id="map" class="map-placeholder"></div>
        <div class="status-btns">
          <el-button v-for="(s, i) in statusList" :key="i" size="small" plain>{{ s }}</el-button>
        </div>
      </div>
      <div class="timeline-card">
        <el-timeline>
          <el-timeline-item
            v-for="(item, idx) in timeline"
            :key="idx"
            :timestamp="item.time"
            :type="item.type"
            :icon="item.icon"
            :color="item.color"
            placement="top"
          >
            <div>{{ item.title }}</div>
            <div class="timeline-desc">{{ item.desc }}</div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </div>
  </div>




    </el-card>
    <el-empty v-else description="加载中…" />
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { getOrderDetail } from '@/api/order'

const { id } = useRoute().params
const detail = ref(null)


</script>